{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '编辑器:example/editor/index', 'editormd'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">Markdown 在线编辑器 Editor.md</div>
        </header>
        <div class="card-body">
        
        <p>这里使用的是最新版本： v1.5.0，官方地址：<a href="http://editor.md.ipandao.com/" target="_blank">http://editor.md.ipandao.com/</a></p>
        <div id="test-editor">
          <textarea style="display:none;">[TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

  editor.md/
          lib/
          css/
          scss/
          tests/
          fonts/
          images/
          plugins/
          examples/
          languages/     
          editormd.js
          ...

```html
&lt;!-- English --&gt;
&lt;script src="js/editor.md/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="js/editor.md/languages/zh-tw.js"&gt;&lt;/script&gt;
```
          </textarea>
        </div>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    var editor;
    var myLayerIndex;
    function open_image(){
        myLayerIndex = open_layer('选择图片', "{:url('attachment/index/index')}?iframe=1&callback=receiveDataForEditor&multiple=1", function (){});
    }
    function receiveDataForEditor(url){
        layer.close(myLayerIndex);
        $('.editormd-image-dialog').remove();
        $('.editormd-mask').hide();
        var arr = url.split(',');
        var dom = '';
        for (var i = 0; i < arr.length; i++) {
            var image = `![](${arr[i]})`;
            editor.cm.replaceSelection(image);
        }
    }
    $(function() {
        editor = editormd("test-editor", {
            // width  : "100%",
            height : "600",
            path   : "{$xpConfig['web_static']}/js/editor.md/lib/",
            codeFold : true,
            htmlDecode : 'iframe|on*', // 开启标签
            imageUpload : true,
            onload : function() {
                $('i[name="image"]').on('click',function(){
                    setTimeout(function(){
                        $('.editormd-file-input').html('<input type="submit" onclick="open_image();" value="本地上传">');
                    },300);
                })
            }
        });
    });
    </script>